class ChainContext2d {
	constructor(canvas) {
		this.ctx = canvas.getContext("2d");
	}

	lineWidth(val) {
		this.ctx.lineWidth = val;
		return this;
	}
	strokeStyle(val) {
		this.ctx.strokeStyle = val;
		return this;
	}
	font(val) {
		this.ctx.font = val;
		return this;
	}
	textAlign(val) {
		this.ctx.textAlign = val;
		return this;
	}

	beginPath() {
		this.ctx.beginPath();
		return this;
	}
	closePath() {
		this.ctx.closePath();
		return this;
	}
	moveTo(x, y) {
		this.ctx.moveTo(x, y);
		return this;
	}
	lineTo(x, y) {
		this.ctx.lineTo(x, y);
		return this;
	}
	fillText(text, x, y, maxWidth) {
		this.ctx.strokeText(text, x, y, maxWidth);
		return this;
	}
	stroke() {
		this.ctx.stroke();
		return this;
	}
	rect(w, h) {
		this.ctx.rect(0, 0, w, h)
	}
}

/**
 * 实例化参数：
 *      query: canvas DOM对象
 *      bigGridX: 横向25x25的格子数
 *      bigGridY: 纵向25x25的格子数
 *      direction：心电图方向 x为横向 y为竖向
 */
export default class EGC {
	static multiple = 4
	static offsetx = 100;
	static offsety = 100;
	static SMALL_INTERVAL = 10 * EGC.multiple;
	constructor(query, bigGridX, bigGridY, dpx, direction, index, data) {
		if (EGC.SMALL_INTERVAL % 5 !== 0) {
			console.warn("最小格子的宽高不能被5整除，将会出现误差");
		}
		// #ifdef MP
		query.exec(res => {
			this.canvas = res[0].node;
			this.ctx = new ChainContext2d(this.canvas);
			this.bigGridX = bigGridX;
			this.bigGridY = bigGridY;
			this.direction = direction;
			this.canvas.width = bigGridX * EGC.SMALL_INTERVAL * 25 + EGC.offsetx * 2;
			this.canvas.height = bigGridY * EGC.SMALL_INTERVAL * 25 + EGC.offsety * 2;

			//this.grid(index, 1, data);
		})
		// #endif
		// #ifdef H5
		query.firstChild.width = bigGridX * EGC.SMALL_INTERVAL * 25;
		query.firstChild.height = bigGridY * EGC.SMALL_INTERVAL * 25;

		this.canvas = query.firstChild;
		this.ctx = new ChainContext2d(query.firstChild);
		this.bigGridX = bigGridX;
		this.bigGridY = bigGridY;
		this.direction = direction;
		setTimeout(() => {
			this.grid(index, 2);
		}, 500)
		// #endif
	}

	static isArray(val) {
		return Object.prototype.toString.call(val) === '[object Array]';
	}

	//绘制格子
	grid(index, dpx, data) {
		console.log('这里到了吗', data, this);
		this.ctx.rect(this.canvas.width, this.canvas.height)
		const d = dpx ? dpx : 1;
		/* 1 x 1 区域分割线 start */
		for (let i = 0; i <= 25 * this.bigGridX; i++) {
			this.ctx.beginPath()
				.strokeStyle("#FAD2F0")
				.lineWidth(EGC.multiple * 2 / d)
				.moveTo(i * EGC.SMALL_INTERVAL / d + EGC.offsetx, EGC.offsety)
				.lineTo(i * EGC.SMALL_INTERVAL / d + EGC.offsetx, this.canvas.height - EGC.offsety)
				.stroke()
				.closePath();
		}
		for (let i = 0; i <= 25 * this.bigGridY; i++) {
			this.ctx.beginPath()
				.strokeStyle("#FAD2F0")
				.lineWidth(EGC.multiple * 2 / d)
				.moveTo(EGC.offsetx, i * EGC.SMALL_INTERVAL / d + EGC.offsety)
				.lineTo(this.canvas.width - EGC.offsetx, i * EGC.SMALL_INTERVAL / d + EGC.offsety)
				.stroke()
				.closePath();
		}
		/* 1 x 1 区域分割线 end */

		/* 5 x 5 区域分割线 start */
		for (let i = 0, len = 25 * this.bigGridX; i <= len; i += 5) {
			this.ctx.beginPath()
				.strokeStyle("#FFC0CB")
				.lineWidth(2 * EGC.multiple / d)
				.moveTo(i * EGC.SMALL_INTERVAL / d + EGC.offsetx, EGC.offsety)
				.lineTo(i * EGC.SMALL_INTERVAL / d + EGC.offsetx, this.canvas.height - EGC.offsety)
				.stroke()
				.closePath();
		}
		for (let i = 0, len = 25 * this.bigGridY; i <= len; i += 5) {
			this.ctx.beginPath()
				.strokeStyle("#FFC0CB")
				.lineWidth(2 * EGC.multiple / d)
				.moveTo(EGC.offsetx, i * EGC.SMALL_INTERVAL / d + EGC.offsety)
				.lineTo(this.canvas.width - EGC.offsetx, i * EGC.SMALL_INTERVAL / d + EGC.offsety)
				.stroke()
				.closePath()
		}
		/* 5 x 5 区域分割线 end */

		/* 25 x 25 区域分割线 start */
		for (let i = 0, len = 25 * this.bigGridX; i <= len; i += 25) {
			this.ctx.beginPath()
				.strokeStyle("#FF7A7A")
				.lineWidth(3 * EGC.multiple / d)
				.moveTo(i * EGC.SMALL_INTERVAL / d + EGC.offsetx, EGC.offsety)
				.lineTo(i * EGC.SMALL_INTERVAL / d + EGC.offsetx, this.canvas.height - EGC.offsety)
				.stroke()
				.closePath();
		}
		for (let i = 0, len = 25 * this.bigGridY; i <= len; i += 25) {
			this.ctx.beginPath()
				.strokeStyle("#FF7A7A")
				.lineWidth(3 * EGC.multiple / d)
				.moveTo(EGC.offsetx, i * EGC.SMALL_INTERVAL / d + EGC.offsety)
				.lineTo(this.canvas.width - EGC.offsetx, i * EGC.SMALL_INTERVAL / d + EGC.offsety)
				.stroke()
				.closePath()
		}
		/* 25 x 25 区域分割线 end */

		/* 125 x 125 纵向分割线 start */
		// if (this.direction == 'y') {
		// 	for (let i = 0, len = 25 * this.bigGridY; i <= len; i += 125) {
		// 		this.ctx.beginPath()
		// 			.strokeStyle("#FF7A7A")
		// 			.lineWidth(5 * EGC.multiple / d)
		// 			.moveTo(EGC.offsety, i * EGC.SMALL_INTERVAL / d + EGC.offsety)
		// 			.lineTo(this.canvas.height - EGC.offsety, i * EGC.SMALL_INTERVAL / d + EGC.offsety)
		// 			.stroke()
		// 			.closePath();
		// 	}
		// } else {
		// 	for (let i = 0, len = 25 * this.bigGridX; i <= len; i += 125) {
		// 		this.ctx.beginPath()
		// 			.strokeStyle("#FF7A7A")
		// 			.lineWidth(5 * EGC.multiple / d)
		// 			.moveTo(i * EGC.SMALL_INTERVAL / d + EGC.offsetx, EGC.offsety)
		// 			.lineTo(i * EGC.SMALL_INTERVAL / d + EGC.offsetx, this.canvas.height - EGC.offsety)
		// 			.stroke()
		// 			.closePath();
		// 	}
		// }
		/* 125 x 125 纵向分割线 end */

		/* 绘制标注 start */
		if (index === 0) {
			this.ctx.beginPath()
				.lineWidth(2 * EGC.multiple / d) // 线宽
				.strokeStyle("#000000") // 颜色取值
				.moveTo(0 * 10 * EGC.multiple / d + EGC.offsetx + 5, 5 * 10 * EGC.multiple / d + EGC.offsety)
				.lineTo(1 * 10 * EGC.multiple / d + EGC.offsetx + 5, 5 * 10 * EGC.multiple / d + EGC
					.offsety) // 先向右画1单位的横线
				.lineTo(1 * 10 * EGC.multiple / d + EGC.offsetx + 5, 2 * 10 * EGC.multiple / d + EGC
					.offsety) // 再向上画8单位的竖线
				.lineTo(4 * 10 * EGC.multiple / d + EGC.offsetx + 5, 2 * 10 * EGC.multiple / d + EGC
					.offsety) // 再向右画3单位的横线
				.lineTo(4 * 10 * EGC.multiple / d + EGC.offsetx + 5, 5 * 10 * EGC.multiple / d + EGC
					.offsety) // 再向下画8单位的竖线
				.lineTo(5 * 10 * EGC.multiple / d + EGC.offsetx + 5, 5 * 10 * EGC.multiple / d + EGC
					.offsety) // 再向右画1单位的横线
				.stroke()
				.closePath();
		}
		/* 绘制标注 end */

		//绘制标尺
		for (let i = 0, len = 25 * this.bigGridX; i <= len; i += 25) {
			this.ctx.textAlign('center');
			this.ctx.font('80px sans-serif')
			this.ctx.fillText(((i / 25)) + 's', i * EGC.SMALL_INTERVAL / d + EGC.offsetx + 40, this.canvas
				.height)
		}
		this.curveChart(data)
	}


	//绘制心电图

	curveChart(data, dpx) {
		console.log('到这里绘制吗',this.ctx)
		let len = 1;
		let indicate = (this.bigGridY - len) % 2 === 0 ? 25 / 2 : 0;
		let startX = EGC.offsetx,
			startY = 25 * EGC.SMALL_INTERVAL + EGC.offsety
		let temp = startY;
		if (data.length == 0) {
			return
		}
		startY = temp - data[0] * 400
		for (let i = 0; i < data.length; i++) {
			this.ctx.beginPath()
				.strokeStyle("#000000")
				.lineWidth(3 * EGC.multiple)
				.moveTo(startX, startY)
				.lineTo(startX + 1, temp - data[i] * 400)
				.stroke()
				.closePath();
			startX = startX + 1;
			startY = temp - data[i] * 400
			console.log('在绘制了吗',startX,startY)
		}
	}
}